<template>
	<view class="warp">
		<view class="" style="text-align: center;padding: 10rpx 15rpx;background-color: #fff;">
			<image  :src="introduce.websiteImage" mode="widthFix"></image>
		</view>
		<view class="jianjie_title">
			协会简介
		</view>
		<view class="introduce" :style="{height:i_height}" >
			<jyf-parser :isAll="true" :html="companyinfo" ></jyf-parser>
			<!-- {{toHtml(introduce.websiteContent)}} -->
			<view class="xuhua" v-if="!i_ishsow">
				
			</view>
			
		</view>
		<view class="buttonty" @click="changiht" v-if="i_ishsow"  style=" background: linear-gradient(to bottom,  rgba(255,255,255,0.5),  rgba(255,255,255,1));">
			<view class="button_item">
				收起
			</view>
		</view>
		<view class="buttonty" @click="changiht"  v-else  >
			<view class="button_item">
				展开
			</view>
		</view>
		
		<view class="jiagou_title">
			组织架构
		</view>
		<view class="">
			<uni-collapse accordion>
				<uni-collapse-item :title="item.pname" v-for="(item,index) in list" :key="index">
					
					<view @click="towebinfo(val)" class="or_cont" v-for="(val,idx) in item.plist">
						<view  class="image_avtor">
							<image style="width: 300rpx;height: 320rpx;" :src="val.orgPeopleImage" mode="scaleToFill"></image>
						</view>
						<view class="indsuce">
							<view class="name">
								{{val.orgPeopleName}}
							</view>
							<view class="infotext">
								{{val.orgPeopleIntroduce}}
							</view>
						</view>
					</view>
					
				</uni-collapse-item>
				 
				 
			</uni-collapse>
		</view>
		<view class="">
			
		</view>
		<view class="bottom" style="margin-bottom: 25%; height: 100rpx;">
			
		</view>
	</view>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	import uniCollapse  from "../uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "../uni-collapse-item/uni-collapse-item.vue"
	import { quillEscapeToHtml } from '@/utils/common.js'
	import { mapState, mapMutations } from 'vuex'
	// 协会介绍
	export default {
		components:{
			jyfParser,
			uniCollapse,
			uniCollapseItem
		},
		data() {
			return {
				introduce:{},
				queryform:{
					pageSize:20,
					current:1,
					websiteType:'3',//类型
				},
				companyinfo:'',
				total:0,
				type:null,
				list:[],
				i_height:200+'rpx',
				i_ishsow:false,
			}
		},
		computed: {
		  ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
		},
		onLoad(e) {
			if(e){
				this.type=e.type
			}
			this.getintroduce()
			this.getzuzhiinfo()
		},
		// 下拉
			onPullDownRefresh() {
				// 刷新位置
			this.getintroduce()
				var that=this
				setTimeout(function(){
						uni.stopPullDownRefresh()
					},1000)
			},
		methods: {
			// 点击查看
			changiht(){
				 if(!this.i_ishsow){
					 this.i_height='100%';
					 this.i_ishsow=!this.i_ishsow
					 console.log( this.i_ishsow);
				 }else{
					 this.i_height=200+'rpx';
					 this.i_ishsow=!this.i_ishsow
				 }
				
			},
			// 获取组织架构
			getzuzhiinfo(){
				this.$request({
					url:'v3/pc/front/memberOrganizational/list',
					methods:"GET",
					data:{createBy:uni.getStorageSync('storeId') }
				}).then(res=>{
					 this.list=res.data.list
					 let arry=[]
					 this.list.forEach((item,index)=>{
						 if(arry.length==0){
							 arry.push({pname:item.organizationalType,plist:[]})
							 arry[0].plist.push(item)
						 }else{
							 let isok=null
							isok= arry.every((val,index)=>item.organizationalType!=val.pname)
							if(isok){
								arry.push({pname:item.organizationalType,plist:[]})
								arry[arry.length-1].plist.push(item)
							}else{
								arry.forEach((vals,idxs)=>{
									if(vals.pname==item.organizationalType){
										vals.plist.push(item)
									}
								})
							}
							
						 }
						  
						 
					 })
					  this.list=arry
				})
			},
			// 跳转微官网‘
			towebinfo(val){
				console.log(val);
				if(val.vendorId){
					uni.navigateTo({
						 url:"/webcont/webindex/webindex?searchId="+val.vendorId
							  })
				}else{
					uni.showToast({
						title:"暂未绑定",
						icon:'none'
					})
				}
				
			},
			
			getintroduce(){
				this.queryform.vendorId=uni.getStorageSync('storeId') 
				// uni.getStorageSync('storeId')
				 // if(this.type==1){
					//  // 查看自己
					//  this.queryform.vendorId=this.userCenterData.vendorId
				 // }else{
					//  // 查看浏览协会
					// this.queryform.vendorId=uni.getStorageSync('storeId') 
				 // }
					this.$request({
						url:'v3/website/front/member/list',
						method:'GET',
						data:this.queryform
					}).then(res=>{
						if(res.state==200){
							this.introduce=res.data.list[0]
						    this.companyinfo=quillEscapeToHtml(res.data.list[0].websiteContent)
						}
					})
				
				
			},
			// 去除标签
			delHtmlTag (str) {
			  return str.replace(/<[^>]+>/g, '')
			},
						//转换html
						toHtml(str) {
							var arrEntities = {
								'lt': '<',
								'gt': '>',
								'nbsp': ' ',
								'amp': '&',
								'quot': '"'
							};
							return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,
								function(all, t) {
									return arrEntities[t];
								});
						},
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
				width: 750rpx;
				margin: 0 auto;
				background: #F5F5F5;
				
			}
.warp{
	
	.buttonty{
		height: 80rpx;
		background-color: rgba(255,255,255,1);
		text-align: center;
		line-height: 80rpx;
		color: #ff841f; 
		 padding: 10rpx 15%;
		 .button_item{
			 // width: 80%;
			 height: 60rpx;
			 border-radius: 10rpx;
			 background-color: rgba(255, 132, 31, 0.2);
			 text-align: center;
			 line-height: 60rpx;
		 }
		  
	}
	
	
	.introduce{
		margin-top: 10rpx;
		background-color: #fff;
		padding: 10rpx 20rpx;
		
		overflow: hidden;
		position: relative;
		// text-overflow: ellipsis;
		// -webkit-line-clamp: 2;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// white-spce:nowrap
		.xuhua{
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			height: 150rpx;
			 background: linear-gradient(to bottom,  rgba(255,255,255,0.3),  rgba(255,255,255,1));
			// background-color: rgba(255,255,255,0.7);
		}
	}
	.jiagou_title,.jianjie_title{
		margin-top: 10rpx;
		background-color: #fff;
		padding: 20rpx;
		font-size: 36rpx;
		 
	}
	.or_cont{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
		border-top: 2rpx solid #cecece;
		.image_avtor{
			width: 300rpx;
			// height: 400rpx;
			padding: 10rpx;
		}
		.indsuce{
			width: 370rpx;
			text-align: center;
			padding: 10rpx 10rpx 10rpx 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.name{
				font-size: 32rpx;
				font-weight: 550;
				padding: 10rpx;
			}
			.infotext{
				overflow: hidden;
				 text-overflow: ellipsis;
				 display: -webkit-box; 
				 -webkit-box-orient: vertical;
				 -webkit-line-clamp:7;
				 // height: 180rpx
			}
			
		}
	}
}
</style>
